<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康社区</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<header>
    <h1>老年人健康社区</h1>
</header>

<!-- 导航栏 -->
<nav>
    <div>
        <a href="{{ url_for('index') }}">首页</a>
	<a href="{{ url_for('health_data') }}">健康档案</a>
	<a href="{{ url_for('health_analysis') }}">健康分析</a>
	<a href="{{ url_for('personal_advice') }}">个性化建议</a>
	<a href="{{ url_for('community') }}">健康社区</a>
	<a href="{{ url_for('contact') }}">联系我们</a>

    </div>
        <div class="search-bar">
        <input type="text" id="search-input" placeholder="全文搜索...">
        <button onclick="searchArticles()">搜索</button>
    </div>
</nav>

<div class="section" id="community">
    <h2>社区文章</h2>
    <p>以下是健康相关的热门文章：</p>
    <div id="article-list">
        <!-- 动态加载文章 -->
    </div>
</div>

<footer>
    <p>© 2024 老年人健康档案服务平台 | 地址: 北京市某区某街道100号</p>
    <p>友情链接: <a href="https://www.who.int" target="_blank">世界卫生组织</a> | <a href="https://www.nhc.gov.cn" target="_blank">国家卫生健康委员会</a></p>
</footer>

<script>
    // 模拟文章数据
    const articles = [
        { title: "健康饮食的5个小技巧", content: "保持均衡饮食，每日摄入丰富的水果和蔬菜。" },
        { title: "老年人运动注意事项", content: "每天适量运动，如散步和简单的瑜伽。" },
        { title: "高血压患者的健康管理", content: "减少盐分摄入，定期监测血压。" },
        { title: "如何改善睡眠质量", content: "避免睡前饮用咖啡，尝试冥想放松。" }
    ];

    // 根据搜索词过滤文章
    function loadArticles() {
        const urlParams = new URLSearchParams(window.location.search);
        const searchQuery = urlParams.get('search');
        const articleList = document.getElementById('article-list');
        articleList.innerHTML = '';

        const filteredArticles = articles.filter(article =>
            !searchQuery || article.title.includes(searchQuery)
        );

        if (filteredArticles.length === 0) {
            articleList.innerHTML = '<p>未找到相关的文章。</p>';
        } else {
            filteredArticles.forEach(article => {
                const articleDiv = document.createElement('div');
                articleDiv.innerHTML = `
                    <h3>${article.title}</h3>
                    <p>${article.content}</p>
                    <hr>
                `;
                articleList.appendChild(articleDiv);
            });
        }
    }

    // 加载页面时执行
    window.onload = loadArticles;
</script>
</body>
</html>
